<!--<template>-->
<!--  <div class="back show-time" >-->
<!--    <div class="user-banner " >-->
<!--      <el-carousel indicator-position="outside">-->
<!--        <el-carousel-item v-for="item in 4" :key="item">-->
<!--          <h3>{{ item }}</h3>-->
<!--        </el-carousel-item>-->
<!--      </el-carousel>-->
<!--    </div>-->

<!--    <div class="user-body">-->
<!--      <div  style="width: 100%;height: 60px;background-color: #ffffff;display: flex;-->
<!--         flex-direction: row;align-content: center;justify-content: center;align-items: center;" >-->
<!--        推背图-->
<!--      </div>-->

<!--      <el-collapse accordion>-->
<!--        <el-collapse-item>-->
<!--          <template slot="title">-->
<!--            一致性 Consistency<i class="header-icon el-icon-info"></i>-->
<!--          </template>-->
<!--          <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>-->
<!--          <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>-->
<!--        </el-collapse-item>-->
<!--        <el-collapse-item title="反馈 Feedback">-->
<!--          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>-->
<!--          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>-->
<!--        </el-collapse-item>-->
<!--        <el-collapse-item title="效率 Efficiency">-->
<!--          <div>简化流程：设计简洁直观的操作流程；</div>-->
<!--          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>-->
<!--          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>-->
<!--        </el-collapse-item>-->
<!--        <el-collapse-item title="可控 Controllability">-->
<!--          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>-->
<!--          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>-->
<!--        </el-collapse-item>-->
<!--      </el-collapse>-->
<!--    </div>-->

<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--import {get, post} from "@/utils/http";-->
<!--export default {-->
<!--  name: "LearnPage",-->
<!--  data(){-->
<!--    return {-->
<!--      userId: "",-->
<!--      userInfo: {},-->
<!--      activeTabName:"",-->
<!--      isCurrentUser:false,-->
<!--      loading: "",-->
<!--      activeName:'',-->
<!--      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",-->
<!--      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",-->
<!--      sizeList: ["large", "medium", "small"]-->
<!--    }-->
<!--  },-->
<!--  methods:{-->
<!--    handleClick(tab, event) {-->
<!--      console.log(tab, event);-->
<!--    },-->
<!--    updateUserInfo(){-->
<!--    },-->

<!--    loadArticle(){-->

<!--    } ,-->
<!--    changeTab(){-->

<!--    },-->
<!--    loadUserInfo(){-->
<!--      //-->
<!--      post('/user',{-->
<!--        user: ''-->
<!--      }).then(e=>{-->

<!--        console.log(e)-->
<!--      })-->
<!--    },-->
<!--    resetCurrentUser(){-->

<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->


<!--<style  scoped>-->

<!--.el-avatar {-->
<!--  display: inline-block;-->
<!--  box-sizing: border-box;-->
<!--  text-align: center;-->
<!--  overflow: hidden;-->
<!--  color: #fff;-->
<!--  /* background: #C0C4CC; */-->
<!--  background: inherit;-->
<!--  width: 40px;-->
<!--  height: 40px;-->
<!--  line-height: 40px;-->
<!--}-->

<!--.back-0{-->
<!--  width: 600px;-->
<!--  height: 60px;-->
<!--}-->

<!--.user-info-article{-->
<!--  width: 280px;-->
<!--  margin-top: 10px;-->
<!--  height: 50px;-->
<!--  border-bottom: 1px solid #dfe6de;-->
<!--  background-color: white;-->
<!--}-->
<!--.create-user{-->
<!--  width: 280px;-->
<!--  height: 200px;-->
<!--  background-color: white;-->
<!--}-->
<!--.user-info{-->
<!--  width: 150px;-->
<!--  height: 120px;-->
<!--}-->
<!--.user-img{-->
<!--  height: 6 0px;-->
<!--  position: absolute;-->
<!--  top: -10px;-->

<!--}-->

<!--.el-divider2{-->
<!--  background-color: #c7d4e4;-->
<!--}-->

<!--@keyframes ani-demo-spin {-->

<!--}-->
<!--.back{-->

<!--  border-radius: 5px;-->

<!--  width: 100%;-->
<!--  height: 800px;-->
<!--}-->
<!--.show-time{-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--  align-content: center;-->
<!--  justify-content: center;-->
<!--}-->
<!--.show-time2{-->
<!--  display: flex;-->
<!--  flex-direction: row;-->
<!--  align-items: center;-->
<!--  align-content: center;-->
<!--  justify-content: center;-->
<!--}-->
<!--.user-body{-->
<!--  background-color: white;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--  width: 66%;-->
<!--  height: 600px;-->

<!--}-->

<!--.el-carousel__item h3 {-->
<!--  color: #475669;-->
<!--  font-size: 18px;-->
<!--  opacity: 0.75;-->
<!--  line-height: 300px;-->
<!--  margin: 0;-->
<!--}-->

<!--.el-carousel__item:nth-child(2n) {-->
<!--  background-color: #99a9bf;-->
<!--}-->

<!--.el-carousel__item:nth-child(2n+1) {-->
<!--  background-color: #d3dce6;-->
<!--}-->
<!--.user-banner {-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--  border-radius: 5px;-->
<!--  width: 66%;-->
<!--  height: 300px;-->
<!--  background-color: #e6eef6;-->
<!--  color: #9ba7b9;-->
<!--}-->

<!--.user-left {-->
<!--  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--  border-radius: 5px;-->
<!--  width:64%;-->
<!--  height: 500px;-->
<!--  background-color: #edf3f0;-->
<!--  color: #b5bfba;-->
<!--  margin: 5px;-->
<!--}-->
<!--.el-tabs__item:hover {-->
<!--  color: #e6eef6;-->
<!--  cursor: pointer;-->
<!--}-->


<!--.el-tabs__item.is-active {-->
<!--  color: #e4eaf1;-->
<!--}-->

<!--.el-tabs__nav-wrap::after {-->
<!--  content: "";-->
<!--  position: absolute;-->
<!--  left: 0;-->
<!--  bottom: 0;-->
<!--  width: 100%;-->
<!--  height: 2px;-->
<!--  /* background-color: #E4E7ED; */-->
<!--  background-color: #42b983;-->



<!--  z-index: 1;-->
<!--}-->
<!--.user-right {-->
<!--  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--  border-radius: 5px;-->
<!--  width: 30%;-->
<!--  margin: 5px;-->
<!--  height: 500px;-->
<!--  background-color: #edf3f0;-->
<!--  color: #9ba7b9;-->
<!--}-->


<!--</style>-->